<template>
  <div class="chartPage">
    <div class="title">中国疫情图</div>
    <div class="filter"></div>
    <div class="main" ref="chart_map"></div>
  </div>
</template>

<script>
import { seriesLoadScripts } from '@a/js/mod/public'

export default {
  name: 'chartMap',
  components: {},

  props: ['chartsData'],

  data() {
    return {
      option: {
        title: {
          // text: '中国疫情图',
          // left: 'center'
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['中国疫情图'],
        },
        visualMap: {
          type: 'piecewise',
          textStyle: {
            color: '#ffffff',
          },
          pieces: [
            {
              min: 1000,
              max: 1000000,
              label: '大于等于1000人',
              color: '#222237',
            },
            { min: 500, max: 999, label: '确诊500-999人', color: '#3b3e4e' },
            { min: 100, max: 499, label: '确诊100-499人', color: '#5c6e97' },
            { min: 10, max: 99, label: '确诊10-99人', color: '#8ab9ee' },
            { min: 1, max: 9, label: '确诊1-9人', color: '#d4d9ee' },
          ],
          color: ['#E0022B', '#E09107', '#A3E00B'],
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        roamController: {
          show: true,
          left: 'right',
          mapTypeControl: {
            china: true,
          },
        },
        series: [
          {
            name: '确诊数',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
              show: true,
              color: 'rgb(249, 249, 249)',
            },
            data: [
              {
                name: '北京',
                value: 212,
              },
              {
                name: '天津',
                value: 60,
              },
              {
                name: '上海',
                value: 208,
              },
              {
                name: '重庆',
                value: 337,
              },
              {
                name: '河北',
                value: 126,
              },
              {
                name: '河南',
                value: 675,
              },
              {
                name: '云南',
                value: 117,
              },
              {
                name: '辽宁',
                value: 74,
              },
              {
                name: '黑龙江',
                value: 155,
              },
              {
                name: '湖南',
                value: 593,
              },
              {
                name: '安徽',
                value: 480,
              },
              {
                name: '山东',
                value: 270,
              },
              {
                name: '新疆',
                value: 29,
              },
              {
                name: '江苏',
                value: 308,
              },
              {
                name: '浙江',
                value: 829,
              },
              {
                name: '江西',
                value: 476,
              },
              {
                name: '湖北',
                value: 13522,
              },
              {
                name: '广西',
                value: 139,
              },
              {
                name: '甘肃',
                value: 55,
              },
              {
                name: '山西',
                value: 74,
              },
              {
                name: '内蒙古',
                value: 34,
              },
              {
                name: '陕西',
                value: 142,
              },
              {
                name: '吉林',
                value: 42,
              },
              {
                name: '福建',
                value: 179,
              },
              {
                name: '贵州',
                value: 56,
              },
              {
                name: '广东',
                value: 797,
              },
              {
                name: '青海',
                value: 15,
              },
              {
                name: '西藏',
                value: 1,
              },
              {
                name: '四川',
                value: 282,
              },
              {
                name: '宁夏',
                value: 34,
              },
              {
                name: '海南',
                value: 79,
              },
              {
                name: '台湾',
                value: 10,
              },
              {
                name: '香港',
                value: 15,
              },
              {
                name: '澳门',
                value: 9,
              },
            ],
          },
        ],
      },
    }
  },

  created() {},

  mounted() {
    const _this = this
    _this.init()
  },

  methods: {
    init() {
      const _this = this
      _this.setChinaJS()
    },

    setChinaJS(fn) {
      const _this = this
      let url = [
        // 'https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js',
        // 'https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js',
      ]
      //   seriesLoadScripts(url, function() {
      //     _this.setChartShow()
      //     if (fn) fn()
      //   })

      _this.setChartShow()
      if (fn) fn()
    },

    setChartShow() {
      const _this = this
      let option = _this.option
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(_this.oChartMap)
      myChart.showLoading()
      myChart.setOption(option)
      myChart.hideLoading()

      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
  },

  computed: {
    oChartMap() {
      return this.$refs.chart_map
    },
  },
}
</script>

<style scoped>
.bm-view {
  height: 500px;
  width: 500px;
}
</style>
